<template>
  <div class="add-chart">
    <!-- 头部 -->
    <div class="header">
      <span>上周试题新增</span>
      <i class="el-icon-warning"></i>
    </div>
    <!-- 内容 -->
    <div class="chart">
      <div class="addChart" ref="addTestChart"></div>
    </div>
    <div class="hr"></div>
    <!-- 底部 -->
    <div class="footer">
      <span>上周新增总量</span>
      <span class="number">1,234</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addtest: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          top: '10%',
          bottom: '3%',
          containLabel: true
        },
        color: ['#2ec7c9', '#b6a2de', '#5ab1ef'],
        xAxis: [
          {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            axisTick: {
              alignWithLabel: true,
              interval: 1
            },
            axisLine: {
              lineStyle: {
                color: '#5ab1ef'
              }
            },
            axisLabel: {
              interval: 1
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#5ab1ef'
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: '#eee'
              }
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['#fff', '#f8f8f8']
              }
            }
          }
        ],
        series: [
          {
            name: '单选',
            type: 'bar',
            stack: '试题',
            barWidth: 15,
            data: [79, 52, 200, 334, 390, 330, 220]
          },
          {
            name: '多选',
            type: 'bar',
            stack: '试题',
            data: [80, 52, 200, 334, 390, 330, 220]
          },
          {
            name: '简答',
            type: 'bar',
            stack: '试题',
            data: [30, 52, 200, 334, 390, 330, 220]
          }
        ]
      }
    }
  },
  created() {},
  mounted() {
    this.getMyCheart()
  },
  methods: {
    async getMyCheart() {
      // 基于准备好的dom，初始化echarts实例
      const addTestChart = this.$refs.addTestChart
      if (addTestChart) {
        const myChart = this.$echarts.init(addTestChart)
        myChart.setOption(this.addtest)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.add-chart {
  display: flex;
  flex-direction: column;
  .chart {
    position: relative;
    height: 160px;
    .addChart {
      position: relative;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
